<template>
  <div>
    <div class="titles">
      <i @click="goBack" class="iconfont fl">&#xe624;</i>
      <h3 class="title-h3">{{title}}</h3>
    </div>
    <div class="content">
      <div class="showWrap">
        <div v-if="isHot" class="isHot">
          <img :src="'http://47.92.123.35:9090/' + partitionImg" alt="" />
        </div>
        <div class="listDiv">
          <div class="listWrap" v-for="(item, index) in goodsList" :key="index" @click="toGoods(index)">
            <div class="imgDiv">
              <img :src="'http://47.92.123.35:9090/' + item.top_img"/>
            </div>
            <div class="descDiv">
              <p class="desc">{{item.goods_title}}</p>
              <p class="price">{{item.goods_price | money}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getGoods, getPart} from '../../api/home.js'
export default {
  data () {
    return {
      title: '',
      goodsList: [],
      isHot: false,
      getParams: {},
      goodsNum: 0,
      isLoading: true,
      dataTables: {
        start: 0,
        length: 10,
        search: ''
      },
      pageLength: -1,
      page: -1,
      allLoaded: false,
      partition: '',
      partitionImg: ''
    }
  },
  filters: {
    money: function (value) {
      return '￥' + value + '/天起'
    }
  },
  mounted () {
    let that = this
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      that.$router.push({
        path: '/'
      })
      error
    }
  },
  methods: {
    goBack () {
      this.$router.push('/')
    },
    async getGoods () {
      try {
        let data = await getGoods({categoryName: this.title})
        this.goodsList = data.data
        console.log(data, 1)
      } catch (err) {
        console.log(err)
      }
    },
    async getPart () {
      try {
        let data = await getPart({partition: this.partition})
        this.goodsList = data.data
      } catch (err) {
        console.log(err)
      }
    },
    toGoods (index) {
      this.goodsNum = this.goodsList[index].goods_num
      this.$store.state.goodsNum = this.goodsNum
      this.$router.push('/goods')
    }
  },
  created: function () {
    this.title = this.$store.state.list
    this.isHot = this.$store.state.isHot
    if (this.isHot) {
      this.partition = this.$store.state.partition
      this.partitionImg = this.$store.state.partitionImg
      this.getPart()
    } else {
      this.getGoods()
    }
  },
  watch: {
  }
}
</script>

<style scoped>
  .titles{
    height: 1.6rem;
    line-height: 1.6rem;
    position: fixed;
    z-index: 10;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
  }
  .title-h3{
    text-align: center;
    font-size: .8rem;
  }
  .iconfont{
    line-height: 1.6rem;
    left: .5rem;
    font-size: .8rem;
    position: absolute;
  }
  .kefu{
    margin-right: .5rem;
  }
  .listDiv{
    padding: 0 3%;
    margin-bottom: .1rem;
  }
  .listWrap{
    display: flex;
    width: 100%;
    height: 6rem;
    font-size: .8rem;
    /*box-shadow: 0 0 0.3rem #b5b5b6;*/
    border-radius: .5rem;
    margin-bottom: .5rem;
    background: #ffffff;
  }
  .descDiv{
    display: flex;
    flex: 1;
    width: 5rem;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding-left: 1rem;
    flex-direction: column;
    justify-content: center;
  }
  .imgDiv{
    padding-left: .5rem;
    height: 100%;
    width: 6.5rem;
  }
  .imgDiv img{
    height: 100%;
    vertical-align: middle;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
  }
  .cardDesc-div p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .desc{
    margin-bottom: .5rem;
    color: #303133;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .price{
    color: #e94c75;
  }
  .isHot{
    padding: 0 3%;
    margin-bottom: .5rem;
  }
  .isHot img{
    width: 100%;
    vertical-align: middle;
  }
  .showWrap{
    margin-top: 2rem;
    /*padding-top: .3rem;*/
  }
  .content {
    /*position: relative;*/
    background: #f7f8f8;
    /*top: 0;*/
    /*z-index: 1;*/
    /*left: 0;*/
    /*bottom: 0; 距离底部的距离为底部盒子的高度，自己也可以设置*/
    overflow-y: scroll;
    width: 100%;
    -webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
    /*position: relative;*/
    height: 100%;
  }
</style>
